<template>
	<view class="main">
		<view class="header">
			<image :src="userInfo.avatar" mode=""></image>
			<p>{{userInfo.nickname}}</p>
		</view>
		<view class="modone">
			<view class="tit">
				<h3>我的订单</h3>
				<p @tap="routerTo('/pages/pageB/order/orderList?status=-1')">
					<span>查看全部订单</span>
					<image class="right" src="@/static/img/hright.png" mode=""></image>
				</p>
			</view>
			<ul class="list">
				<li @tap="routerTo('/pages/pageB/order/orderList?status=0')">
					<image src="@/static/img/dfk.png" mode=""></image>
					<p>待付款</p>
				</li>
				<li @tap="routerTo('/pages/pageB/order/orderList?status=1')">
					<image src="@/static/img/dfh.png" mode=""></image>
					<p>待发货</p>
				</li>
				<li @tap="routerTo('/pages/pageB/order/orderList?status=10,11,12')">
					<image src="@/static/img/dsh.png" mode=""></image>
					<p>已发货</p>
				</li>
				<li @tap="routerTo('/pages/pageB/order/orderList?status=20')">
					<image src="@/static/img/ywc.png" mode=""></image>
					<p>已完成</p>
				</li>
				<li @tap="routerTo('/pages/pageB/order/orderList?status=13,14,15,16,17')">
					<image src="@/static/img/dpj.png" mode=""></image>
					<p>其他</p>
				</li>
			</ul>
		</view>
		<view class="modtwo">
			<h3>我的服务</h3>
			<ul class="list">
				<li @tap="show = true">
					<image class="icon" src="@/static/img/kf.png" mode=""></image>
					<p>联系客服</p>
					<image class="right" src="@/static/img/hright.png" mode=""></image>
				</li>
				<!-- <li>
					<image class="icon" src="@/static/img/pj.png" mode=""></image>
					<p>我的评价</p>
					<image class="right" src="@/static/img/hright.png" mode=""></image>
				</li> -->
				<li @tap="routerTo('/pages/pageB/address/addressList')">
					<image class="icon" src="@/static/img/dz.png" mode=""></image>
					<p>收货地址</p>
					<image class="right" src="@/static/img/hright.png" mode=""></image>
				</li>
				<li @tap="routerTo('/pages/pageB/information/outher')">
					<image class="icon" src="@/static/img/js.png" mode=""></image>
					<p>平台介绍</p>
					<image class="right" src="@/static/img/hright.png" mode=""></image>
				</li>
				<li @tap="routerTo('/pages/pageB/function/feedback')">
					<image class="icon" src="@/static/img/fk.png" mode=""></image>
					<p>意见反馈</p>
					<image class="right" src="@/static/img/hright.png" mode=""></image>
				</li>
				<li @tap="routerTo('/pages/pageB/function/setUp')">
					<image class="icon" src="@/static/img/sz.png" mode=""></image>
					<p>设置</p>
					<image class="right" src="@/static/img/hright.png" mode=""></image>
				</li>
			</ul>
		</view>
		<u-modal :show="show" :content="content" @confirm="show = false" confirmButtonShape="circle"></u-modal>
		<userTabbar seleTabbar="3"></userTabbar>
	</view>
</template>

<script>
	import {
		userInfo,
	} from '@/api/my.js'
	import {
		getConfigs
	} from '@/api/user.js'
	import userTabbar from '../../components/userTabbar.vue';
	export default{
		components: {
			userTabbar
		},
		data(){
			return{
				userInfo:{},
				show:false,
				content:'123456'
			}
		},
		onLoad() {
			this.getKefu()
		},
		onShow() {
			this.getUserInfo()
		},
		methods:{
			async getKefu(){
				let res = await getConfigs({
					name:'kefu'
				})
				this.content = res.data.value
			},
			async getUserInfo(){
				let res = await userInfo()
				console.log(res)
				this.userInfo = res.data
			},
			routerTo(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: calc(100vh - 50px);
		background-image: url('@/static/img/myBg.png');
		background-repeat: no-repeat;
		background-position: top;
		background-size: 100% 270px;
		background-color: #F8F9FC;
		padding: 80px 15px 10px;
		.header{
			display: flex;
			align-items: center;
			color: #fff;
			margin-bottom: 25px;
			image{
				width: 68px;
				height: 68px;
				border-radius: 1000px;
				margin-right: 10px;
			}
		}
		.modone{
			padding:20px;
			background-color: #fff;
			border-radius: 10px;
			margin-bottom: 18px;
			.tit{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 18px;
				h3{
					color: #3D3D3D;
				}
				p{
					display: flex;
					align-items: center;
					font-size: 14px;
					color: #999999;
					image{
						width: 15px;
						height: 15px;
					}
				}
			}
			.list{
				display: flex;
				justify-content: space-between;
				li{
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 12px;
					color: #3D3D3D;
					image{
						width: 32px;
						height: 32px;
						margin-bottom: 10px;
					}
				}
			}
		}
		.modtwo{
			width: 100%;
			padding: 17px 17px 10px;
			background-color: #fff;
			border-radius: 10px;
			h3{
				font-size: 18px;
				color: #3D3D3D;
				margin-bottom: 15px;
			}
			.list{
				li{
					display: flex;
					align-items: center;
					position: relative;
					color: #3D3D3D;
					font-size: 15px;
					margin-bottom: 20px;
					.icon{
						width: 22px;
						height: 22px;
						margin-right: 18px;
					}
					.right{
						position: absolute;
						right: 0;
						width: 20px;
						height: 20px;
					}
				}
				li:last-child{
					margin-bottom: 0;
				}
			}
		}
	}
</style>